<script setup>
import FormTitle from "@/components/Form/FormTitle.vue";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { querySysConfig, configOperation } from "@/api/User/Worker.js";
const form = reactive({
  radio1: 3,
  radio2: 6,
  radio3: 6,
  radio4: 6,
  radio2Input: "",
  radio3Input: "",
  radio4Input: "",
});
const loading = ref(false);
const handlerSearch = async () => {
  // 获取数据\
  loading.value = true;
  const res = await querySysConfig();
  form.radio1 =
    Number(
      res.find(
        (v) => v.configKey == "system.staffMgmt.notify.returnVisitRecord"
      )?.configValue || 1
    ) > 1
      ? 6
      : 3;
  form.radio2 =
    Number(
      res.find((v) => v.configKey == "system.staffMgmt.notify.projectDeadline")
        ?.configValue || 0
    ) > 0
      ? 6
      : 3;
  form.radio3 =
    Number(
      res.find((v) => v.configKey == "system.staffMgmt.notify.projectWriteOff")
        ?.configValue || 0
    ) > 0
      ? 6
      : 3;
  form.radio4 =
    Number(
      res.find((v) => v.configKey == "system.staffMgmt.notify.memberBirthday")
        ?.configValue || 0
    ) > 0
      ? 6
      : 3;
  form.radio2Input =
    Number(res.find((v) => v.configKey == "system.staffMgmt.notify.projectDeadline")
      ?.configValue || 0);
  form.radio3Input =
    Number(res.find((v) => v.configKey == "system.staffMgmt.notify.projectWriteOff")
      ?.configValue || 0);
  form.radio4Input =
    Number(res.find((v) => v.configKey == "system.staffMgmt.notify.memberBirthday")
      ?.configValue || 0);
  loading.value = false;
};

const save = async () => {
  if (form.radio2 == 6 && !form.radio2Input) {
    return ElMessage({
      type: "warning",
      message: "请输入项目到期提醒天数",
      showClose: true,
    });
  }
  if (form.radio3 == 6 && !form.radio3Input) {
    return ElMessage({
      type: "warning",
      message: "请输入项目未核销提醒天数",
      showClose: true,
    });
  }
  if (form.radio4 == 6 && !form.radio4Input) {
    return ElMessage({
      type: "warning",
      message: "请输入会员生日提醒天数",
      showClose: true,
    });
  }
  loading.value = true;
  try {
    await configOperation({
      optDataList: [
        {
          configType: "RETURN_VISIT_RECORD",
          value: form.radio1 == 3 ? "1" : "30",
        },
        {
          configType: "PROJECT_DEADLINE",
          value: form.radio2Input,
          enableStatus:form.radio2 != 3
        },
        {
          configType: "PROJECT_WRITE_OFF",
          value: form.radio3Input,
          enableStatus:form.radio3 != 3,
        },
        {
          configType: "MEMBER_BIRTHDAY",
          value: form.radio4Input,
          enableStatus:form.radio4 != 3,
        },
      ],
    });
    ElMessage.success("保存成功");
  } finally {
    await handlerSearch()
    loading.value = false;
  }
};
const radio2Change = ()=>{
  if(form.radio2 == 3){
    form.radio2Input = 0
  }
}
const radio3Change = ()=>{
  if(form.radio3 == 3){
    form.radio3Input = 0
  }
}
const radio4Change = ()=>{
  if(form.radio4 == 3){
    form.radio4Input = 0
  }
}
defineExpose({ handlerSearch });
</script>
<template>
  <div class="p24" v-loading="loading">
    <FormTitle class="mb16" :titleName="'回访记录'"></FormTitle>
    <div class="settingItem">
      <el-radio-group class="radioGroup" v-model="form.radio1">
        <el-radio :label="3">当月内</el-radio>
        <el-radio :label="6">近30天内</el-radio>
      </el-radio-group>
      <div class="tips mb24">
        会员注册后，负责人在周期内进行回访记录，未回访时提醒对应负责人
      </div>
    </div>
    <FormTitle class="mb16" :titleName="'项目临期'"></FormTitle>
    <div class="settingItem">
      <el-radio-group class="radioGroup" v-model="form.radio2" @change="radio2Change">
        <el-radio :label="3">不提醒</el-radio>
        <el-radio :label="6"
          ><el-input
            style="width: 100px"
            v-model="form.radio2Input"
            placeholder="请输入"
            clearable
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
        ></el-radio> </el-radio-group
      ><span class="groupTip">天内到期提醒</span>
      <div class="tips mb24">会员购买的项目周期内即将到期，提醒对应负责人</div>
    </div>

    <FormTitle class="mb16" :titleName="'项目核销'"></FormTitle>
    <div class="settingItem">
      <el-radio-group class="radioGroup" v-model="form.radio3" @change="radio3Change">
        <el-radio :label="3">不提醒</el-radio>
        <el-radio :label="6"
          ><el-input
            style="width: 100px"
            v-model="form.radio3Input"
            placeholder="请输入"
            clearable
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
        ></el-radio> </el-radio-group
      ><span class="groupTip">天内未核销提醒</span>
      <div class="tips mb24">会员项目周期内未进行核销，提醒对应负责人</div>
    </div>

    <FormTitle class="mb16" :titleName="'会员生日提醒'"></FormTitle>
    <div class="settingItem">
      <el-radio-group class="radioGroup" v-model="form.radio4" @change="radio4Change">
        <el-radio :label="3">不提醒</el-radio>
        <el-radio :label="6"
          ><el-input
            style="width: 100px"
            v-model="form.radio4Input"
            placeholder="请输入"
            clearable
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input
        ></el-radio> </el-radio-group
      ><span class="groupTip">天内会员生日提醒</span>
      <div class="tips mb24">设置后将在会员生日前X天内，提醒对应负责人</div>
    </div>
    <el-button class="saveBox" type="primary" @click="save">保存</el-button>
  </div>
</template>

<style lang="less" scoped>
.tips {
  color: #666666;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.radioGroup {
  margin-bottom: 8px;
  :deep(.el-radio) {
    height: auto;
  }
  :deep(.el-radio .el-radio__label) {
    color: #000000;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
  }
}
.settingItem {
  margin-left: 22px;
}
.groupTip {
  color: #000000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin-left: 8px;
}
.saveBox {
  margin-left: 22px;
  width: 140px;
  height: 32px;
  line-height: 32px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}
</style>
